<script setup>
import { ref, watch } from 'vue'
import api from '@/api/index.js'
import MyTable from '@/components/MyTable/MyTable.vue'

const emits = defineEmits(['close', 'init', 'reload'])
const props = defineProps({
  curRow: {
    type: Object,
    default: () => ({})
  }
})
// 弹窗标题
const title = '详情'
// 表单数据
const formData = ref({})
//入库数据
const tableData = ref([])
//出库数据
const CKtableData = ref([])
// 同步表格数据到表单数据内
watch(
  () => props.curRow,
  async (val) => {
    if (val.id) {
      // 按钮类型的父节点id为数组，需要特殊处理
      const Rkdata = await api.getCrkList({ size: 99999, goodsInventoryId: val.id, type: 1 })
      const Ckdata = await api.getCrkList({ size: 99999, goodsInventoryId: val.id, type: 2 })
      tableData.value = Rkdata.data.records
      CKtableData.value = Ckdata.data.records
    }
  },
  { deep: true, immediate: true }
)
// 是否显示弹窗
const show = ref(false)
// 弹窗显示状态切换时触发
const afterOpenChange = (bool) => {
  if (!bool) {
    formData.value = {}
    emits('reload')
    emits('close')
  }
}
// 打开弹窗
const open = () => {
  show.value = true
}
defineExpose({ open })
// 表格列配置
const columns = ref([
  { ellipsis: true, title: '采购订单', dataIndex: 'orderNo', key: 'orderNo' },
  { ellipsis: true, title: '库存名称', dataIndex: 'productName', key: 'productName' },
  { ellipsis: true, title: '采购数量', dataIndex: 'quantity', key: 'quantity' },
  { ellipsis: true, title: '单价(元)', dataIndex: 'price', key: 'price' },
  { ellipsis: true, title: '单位', dataIndex: 'unit', key: 'unit' },
  { ellipsis: false, title: '入库人员', dataIndex: 'storageName', key: 'storageName' },
  { ellipsis: false, title: '入库经办人', dataIndex: 'handleName', key: 'handleName' },
  { ellipsis: false, title: '入库时间', dataIndex: 'createTime', key: 'createTime' }
])

const CKcolumns = ref([
  { ellipsis: true, title: '库存名称', dataIndex: 'productName', key: 'productName' },
  { ellipsis: true, title: '出库数量', dataIndex: 'quantity', key: 'quantity' },
  { ellipsis: true, title: '单位', dataIndex: 'unit', key: 'unit' },
  { ellipsis: false, title: '领用人员', dataIndex: 'accepterName', key: 'accepterName' },
  { ellipsis: false, title: '出库人员', dataIndex: 'storageName', key: 'storageName' },
  {
    ellipsis: false,
    title: '领用部门/子公司',
    dataIndex: 'accepterDeptName',
    key: 'accepterDeptName'
  },
  { ellipsis: false, title: '出库时间', dataIndex: 'createTime', key: 'createTime' }
])
</script>

<template>
  <a-drawer
    :maskClosable="false"
    :closable="false"
    destroyOnClose
    v-model:open="show"
    class="custom-class"
    root-class-name="root-class-name"
    :title="title"
    placement="right"
    @after-open-change="afterOpenChange"
    width="1200px"
  >
    <MyTable
      :dataSource="tableData"
      :columns="columns"
      :title="() => '入库详情'"
      :pagination="false"
      style="margin-bottom: 10px"
    />
    <MyTable
      :dataSource="CKtableData"
      :columns="CKcolumns"
      :title="() => '出库详情'"
      :pagination="false"
      style="margin-bottom: 10px"
    />
    <template #footer>
      <div style="display: flex; gap: 5px">
        <a-button type="primary" ghost @click="show = false">关闭</a-button>
      </div>
    </template>
  </a-drawer>
</template>